<template>
	<view class="container">
		<view class="photo">
			<image :src="userInfo.avatar" mode="aspectFill"></image>
		</view>
		<button class="btn" size="mini" @click="chooseAvatar">点击更换头像</button>
		<u-action-sheet :actions="list" :show="show" @select="editAvatar" cancelText="取消" @close="show=false">
		</u-action-sheet>
		<u-cell-group>
			<u-cell title="用户昵称" :value="userInfo.name" isLink @click="goToName">
			</u-cell>
			<u-cell title="手机号" :value="userInfo.phone"></u-cell>
			
			<u-cell title="受捐资格认证状态" isLink v-if="userInfo.level==1" @click="goToCertificate">
				<view slot="value" class="u-slot-value">
					<u-tag text="未认证" plain size="mini" type="warning" />
				</view>
			</u-cell>
			<u-cell title="受捐资格认证状态" v-else>
				<view slot="value" class="u-slot-value">
					<u-tag text="已认证" plain size="mini" type="success" />
				</view>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
				},
				show: false,
				list: [{
					name: '更换头像'
				}, {
					name: '查看大图'
				}]
			}
		},
		async onShow() {
			const  userId = uni.getStorageSync("userId")
			console.log(userId);
			const {data:res} = await this.$myRequest({
				url:'/userBefore/getUser/'+userId
			})
			console.log(res.data.user);
			this.userInfo = res.data.user
			console.log(this.userInfo);
		},
		methods: {
			// 跳转到修改昵称页面
			goToName(){
				uni.navigateTo({
					url:'/page_mine/EditName?info='+encodeURIComponent(JSON.stringify(this.userInfo))
				})
			},
			chooseAvatar() { //弹出actionSheet操作列表
				this.show = true;
			},
			editAvatar(item) { //选择更换头像或预览头像
				if (item.name == '更换头像') {
					this.chooseImage()
				} else {
					this.previewImage()
				}
			},
			chooseImage() { //选择图片更换头像
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'http://192.168.31.240:8080/oss/fileoss',
							filePath: tempFilePaths[0],
							name: 'file',
							success: async(uploadFileRes) => {
								const {data:data} = JSON.parse(uploadFileRes.data)
								that.userInfo.avatar = data.url;
								// 修改数据库中的头像数据
								const {data:res} =await that.$myRequest({
									url:'/userBefore/updateUser',
									method:'post',
									data:{
										avatar:that.userInfo.avatar,
										userId:that.userInfo.userId,
										}
								})
								if(res.code==20000){
									uni.showToast({
										title:'修改成功',
										icon:'success'
									})
								}
							},
							
						});
					},
				})
			},
			previewImage() { //预览头像大图
				var that = this;
				console.log(this.userInfo.avatar);
				uni.previewImage({
					urls: [this.userInfo.avatar],
				});
			},
			// 验证是否提交过认证信息，如果提交过提示“已提交申请，请等待审核结果”，若没有提交过，跳转到认证页面
			async goToCertificate(){
				var that = this;
				const {data:res} = await this.$myRequest({
					url:'/userAuthBefore/selectUserAuth/'+that.userInfo.userId,
				})
				// console.log(res.data)
				if(res.data.auth){
					uni.showToast({
						title:'审核中，请等待~',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:'/page_mine/Certificate'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		text-align: center;
		margin-top: 100rpx;

		image {
			border-radius: 50%;
			width: 200rpx;
			height: 200rpx;
		}
	}

	.btn {
		background-color: #AEB5A5;
		color: #fff;
		width: 50%;
		display: block;
		margin: 20rpx auto;
	}

	/deep/button:after {
		border: none;
	}

	/deep/.u-cell-group {
		background-color: #fff;
	}
</style>
